<template>
<div>
	<div style="display: inline;float: right;margin: 0 20px;height: 60px;">
		<el-button style="margin:0 50px;" @click="note=newNote;noteVisible=true" :disabled="owner.id!=me.id">添加笔记</el-button>
	</div>
	<!--显示所有可见Note-->
  	  <el-table
  	  	:data="noteList"
  	  	v-loading="noteListLoading"
  	  	style="height: 500px;padding: 0 20px;overflow-y: auto;"
  	  	size="small"
  	  	>
  	  	<el-table-column
  	  		prop="title"
  	  		label="标题"
  	  		width="320"
  	  		align="center"
  	  		>
  	  	</el-table-column>
  	  		<el-table-column
  	  		prop="created"
  	  		label="创建时间"
  	  		width="200"
  	  		align="center"
  	  		>
  	  	</el-table-column>
  	  	<el-table-column
				label="操作"
				width=""
				align="center"
				>
	<template slot-scope="scope">
		<el-button @click="note=scope.row;noteVisible=true">查看</el-button>
		<el-button @click="handlerDelNote(scope.row.id)" class="delete-button" :disabled="owner.id!=me.id">删除</el-button>
	</template>
	</el-table-column>
  	  </el-table>
  	  
  	  <!--添加或修改Note弹框-->
			<el-dialog
				:visible.sync="noteVisible"
				append-to-body
				>
				<el-form
					style="height: 500px;margin: 0 80px;"
					>
				<el-form-item>
					<el-select v-model="note.authority"
						placeholder="请选择权限"
						:disabled="owner.id!=me.id"
						>
						<el-option
							v-for="authority in authorityOption"
							:key="authority.value"
							:label="authority.label"
							:value="authority.value"
							></el-option>
					</el-select>
				</el-form-item>
					
				<el-form-item
					style="margin: 50px 0;"
					>
				<el-input
				type="text"
				v-model="note.title"
				placeholder="标题"
				:readonly="owner.id!=me.id"
				></el-input>
				</el-form-item>
				<el-form-item>
				<el-input
					type="textarea"
					placeholder="请输入内容"
					maxlength="2000"
					show-word-limit
					rows="10"
					v-model="note.content"
					:readonly="owner.id!=me.id"
					>
				</el-input>
				</el-form-item>
				
				<el-form-item
					align="center"
					style="margin: 50px 0;"
					>
					<el-button @click="handlerAddOrUpdateNote" style="margin: 0 50px;" :disabled="owner.id!=me.id">保存</el-button>
					<el-button @click="noteVisible=false" style="margin: 0 50px;">退出</el-button>
				</el-form-item>
				</el-form>
			</el-dialog>
</div>

</template>

<script>
	import {mapState} from 'vuex'
	export default{
		name:'NoteList',
		data(){
			return {
				noteVisible:false,
				noteList:[],
				authorityOption:[
				{
					value:0,
					label:'所有人可见',
				},
				{
					value:1,
					label:'仅好友可见',
				},
				{
					value:2,
					label:'仅自己可见',
				}
				
				],
				note:{
					id:'',
					userId:'',
					title:'',
					content:'',
					authority:0,
					created:'',

				},
				newNote:{
					id:'',
					userId:'',
					title:'',
					content:'',
					authority:0,
					created:'',
				},
			noteListLoading:true,	
			getNoteListTimer:null,
			}
		},
		props:[
		'owner'
		],
		computed:{
			...mapState(['me'])
		},
		methods:{
		GetNoteList(){
				this.$axios({
					method:'POST',
					url:'note/getByUserId',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:this.owner.id
					}
				}).then(
					response=>{
						if(response.data.success){
							this.noteListLoading=false
							this.noteList=response.data.data
						}else{
							console.log(response.data.message)
						}
					},
					error=>{
						
					}
				)
			},
			handlerAddOrUpdateNote(){
				if(this.note.title==''||this.note.title==null){
					this.$message.error("标题不能为空")
					return
				}
				this.$axios({
					method:'POST',
					url:'note/addOrUpdate',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.note
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("添加或更新成功")
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
				
			},
			handlerDelNote(noteId){
				
				this.$confirm('确认删除该笔记','提示',{
					confirmButtonText:'确定',
					concelButtonText:'取消',
					type:'warning'
				}).then(
					()=>{
				
				this.$axios({
					method:'POST',
					url:'note/delById',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:noteId
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("删除成功")
						}else{
							this.$message.error(response.data.message)
						}
					},error=>{
						
					}
				)
				
					}).catch(
					()=>{
						this.$message.info('已取消')
					}
				);
			},
			init(){
				this.GetNoteList()
			}
		},
		mounted(){
			this.init()
			this.getNoteListTimer=setInterval(()=>{
				this.GetNoteList()
			},2000)
			
		},
		beforeDestroy(){
			clearInterval(this.getNoteListTimer)
		}
	}
</script>

<style>
</style>